<template>
  <view class="bg-color-white">
    <view class="tn-margin-bottom-xl">
      <view
        class="tn-flex tn-flex-row-between tn-padding tn-strip-bottom-min"
        style="background-color: #f1f5fb"
      >
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg"> 一、常见问题 </view>
        </view>
      </view>
      <view
        class="tn-strip-bottom-min tn-padding tn-margin-top-xs"
        v-for="(item, index) in homeList"
        :key="index"
        @click="toDetail(item)"
      >
        <view
          class="tn-flex tn-flex-row-between"
          style="width: 100%; align-items: center"
        >
          <view class="justify-content-item">
            <view class="tn-text-df font-size-16">
              {{ item.title }}
            </view>
          </view>
          <view class="justify-content-item tn-text-lg">
            <TnIcon name="right" />
          </view>
        </view>
        <!-- <view style="margin-top: 15px;" class="font-size-14"-if="item.down">
          {{ item.name }}
          <view class="mt-10">
            <image
              @click="handleImgClick(item.imgList, imgind)"
              v-for="(img, imgind) in item.imgList"
              :src="img"
              mode=""
              style="object-fit: contain; height: 653rpx; width: 300rpx"
              :key="imgind"
            ></image>
             <image src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648118569596-assets/web-upload/4a310720-62d8-46db-9605-22bbf55e5d95.jpeg" mode=""></image> 
             <image src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648118569596-assets/web-upload/4a310720-62d8-46db-9605-22bbf55e5d95.jpeg" mode=""></image> 
          </view>
        </view> -->
      </view>
      <view
        class="tn-flex tn-flex-row-between tn-padding tn-strip-bottom-min"
        style="background-color: #f1f5fb"
      >
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg"> 二、使用步骤 </view>
        </view>
      </view>
      <!-- 使用步骤 -->
      <view class="step-main pa-12">
        <view class="step-list" v-for="(item, index) in useList" :key="index">
          <view class="font-size-16 tn-text-bold tn-mb-sm">{{
            item.title
          }}</view>
          <view class="font-size-14 mt-2">{{ item.content }}</view>
          <view class="font-size-14 mt-2" v-if="item.secondTitle">
            {{ item.secondTitle }}</view
          >

          <view class="mt-10">
            <image
              @click="handleImgClick(item.imgList, imgind)"
              v-for="(img, imgind) in item.imgList"
              style="object-fit: contain; height: 653rpx; width: 300rpx"
              :src="img"
              mode=""
              :key="imgind"
            ></image>
            <!-- <image src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648118569596-assets/web-upload/4a310720-62d8-46db-9605-22bbf55e5d95.jpeg" mode=""></image> -->
            <!-- <image src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648118569596-assets/web-upload/4a310720-62d8-46db-9605-22bbf55e5d95.jpeg" mode=""></image> -->
            <!-- <TnPhotoAlbum :data="item.imgList" :column="item.column" :lazy-load="false" /> -->
          </view>
        </view>
        <!-- <view class="step-list">
          <view class="font-size-16">2、设置年级</view>
          <view class="font-size-14 font-color-c666 mt-2"
            >登录成功后，根据指引设置学生所处年级。可根据学生实际英语水平灵活上下调整年级。</view
          >
          <view class="mt-10">
            <image
              src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648118569596-assets/web-upload/4a310720-62d8-46db-9605-22bbf55e5d95.jpeg"
              mode=""
            ></image>
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
export default {
  data() {
    return {
      show1: false,
      homeList: [
        {
          title: '1、如何激活设备？',
          name: '点击首页（场景练习）左上角按钮，可切换年级，切换后【场景练习】和【达人对话】的内容会根据所选年级自动调整。',
          imgList: [
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/p0JhPWLd4gLgd38af12626e6f775b2efda6196d4e8c7.png',
          ],
        },
      ],
      useList: [
        {
          title: '1、微信登录',
          content: '在【我的】页面点击头像框，同意授权登录',
          imgList: [],
        },
        {
          title: '2、设置年级',
          content:
            '登录成功后，根据指引设置学生所处年级。可根据学生实际英语水平灵活上下调整年级。',
          imgList: [
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/RIjQWg0FcpMJ9a8f2b39faadbb2df1552143f0256382.png',
          ],
        },
        {
          title: '3、激活设备',
          content:
            '在【我的】页面点击头像右侧“去激活”按钮，扫描设备（耳机/手机支架）包装盒上的二维码即可激活并绑定设备。一台设备最多可绑定1个微信号。',
          imgList: [
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/qRcadUdFCHUTc54f784ea04cfe49452a0c0106da5166.png',
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/KDhSaLNYs8oq2fcd1344c00571bfa46fca808e361239.png',
          ],
        },
        {
          title: '4、主要功能介绍',
          content: '',
          imgList: [],
        },
        {
          title: '【场景练习】',
          content:
            '基于人教、新概念、牛津等各版本英语教材生成的适用于不同年级的课文学习跟读模块。可通过页面的“AI换一批”按钮继续学习与该场景类似的课文，以达到举一反三的学习效果',
          imgList: [
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/cSjFGbe5gtHp0e8d12f9ec118ebf8f9deedf2652647c.png',
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/lGPUMRiVuiaIeb1d962410055a8b0eec3de3ab74e5ea.png',
          ],
        },
        {
          title: '【达人对话】',
          content:
            '学习完【场景练习】的场景对话后，可前往【达人对话】模块与AI机器人进行场景模拟对话，帮助学生做到学以致用。',
          imgList: [
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/KFjx2csyIxlef2aacab86455e80c53e9e84cb0ced745.png',
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/lYfBG6qoxhy3bdb5d997c903a4d643148638d5b5188b.png',
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/jNRF5YhIDF6o9cdad85cf8488aea49899a505c57da2d.png',
          ],
        },
        {
          title: '【英语自由说】',
          content:
            '预设不同类型的人物角色，学生可挑选自己感兴趣的角色进行对话，在提升英语口语能力的同时，也能学到更多科学、历史等知识。',
          imgList: [
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/nOl9STbQekbu04de12cd033273eb5b1daef34a5bb4a9.png',
            'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/comm_file_dev/WsTndMubdRMJc998f97cbf813ff37a37e31095fc2e05.png',
          ],
        },
      ],
    }
  },
  methods: {
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      })
    },
    toDetail(item){
      // ?title=${item.title}&name=${item.name}&imgList=${item.imgList}
      uni.navigateTo({
        url:`/home-page/settingDetail/settingDetail?title=${item.title}&name=${item.name}&imgList=${item.imgList}`,
      })
      // tnNavPage(`/home-page/settingDetail/settingDetail`)
    },
    handleImgClick(imgList, index) {
      console.log(imgList, index, [imgList[index]])
      // 预览图片
      uni.previewImage({
        urls: [imgList[index]],
        current: 0,
      })
    },
    handleDown(item, index, type) {
      let down = ''
      if (item.down) {
        down = false
      } else {
        down = true
      }
      if (type == 'home') {
        this.$set(this.homeList, index, {
          ...item,
          down: down,
        })
      } else {
        this.$set(this.secondList, index, {
          ...item,
          down: down,
        })
      }
    },
    // 预览作者图片
    previewQRCodeImage() {
      uni.previewImage({
        urls: ['https://tnuiimage.tnkjapp.com/advertise/qrcode.jpg'],
      })
    },

    // 弹出模态框
    showModal(event) {
      this.openModal()
    },
    // 打开模态框
    openModal() {
      this.show1 = true
    },
  },
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

/* 间隔线 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #f8f9fb;
}

.tn-strip-top {
  width: 100%;
  // border-top: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/

/* 用户头像 start */
.user-image {
  width: 90rpx;
  height: 90rpx;
  position: relative;
}

.user-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ffffff;
}

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}

.tn-footerfixed {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  bottom: 0;
  width: 100%;
  transition: all 0.25s ease-out;
  z-index: 100;
}
.step-list {
  margin-bottom: 12rpx;
  image {
    width: 200rpx;
    height: 240rpx;
    margin-right: 12rpx;
    border-radius: 8rpx;
  }
}
</style>
